<template>
	<view>
		<view :style="[paddingStyle]"></view>
		<view class="footer_btn" :style="[botStyle,{'padding-bottom':bottombtn+'rpx'}]">
			<view class="btn" @click="affirmBtn">{{title}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"bottom_btn",
		props:{
			title:{
				type:String,
				default: ''
			},
			bottombtn:{
				type:Number,
				default: 0
			},
		},
		data() {
			return {
				bottomHeight:0,
			};
		},
		computed:{
			paddingStyle(){
				var height = this.bottomHeight?(this.bottomHeight*2+108+'rpx'):'128rpx'
				return {
					paddingBottom:height
				}
			},
			botStyle(){
				return {
					paddingBottom:this.bottomHeight?this.bottomHeight+'px':'20rpx'
				}
			},
		},
		mounted() {
			uni.getSystemInfo({
				success: (res) => {
					this.bottomHeight = res.safeAreaInsets.bottom
				}
			});
		},
		methods:{
			affirmBtn(){
				this.$emit('submit')
			},
		}
	}
</script>

<style lang="less">
	.footer_btn{
		position: fixed;
		bottom: 0;
		z-index: 9;
		width: 100%;
		background: #fff;
		padding-top: 20rpx;
		padding-left: 32rpx;
		padding-right: 32rpx;
		.btn{
			width: 100%;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			color: #fff;
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			background: #26C281;
			border-radius: 44rpx;
		}
	}
</style>